<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>本地密码管理系统</title>
    <!-- Bootstrap 5 CSS -->

    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <!-- 登录区域（初始显示） -->
    <div id="login-container" class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-6">
                <div class="card shadow">
                    <div class="card-header bg-primary text-white text-center">
                        <h3>本地密码管理系统</h3>
                    </div>
                    <div class="card-body">
                        <form id="login-form">
                            <div class="mb-3">
                                <label for="master-password" class="form-label">主密码</label>
                                <input type="password" class="form-control" id="master-password" required>
                                <div class="form-text">首次使用时设置主密码，以后使用时验证主密码。</div>
                                <div class="password-strength-container mt-2"></div>
                            </div>
                            <div class="d-grid">
                                <button type="submit" class="btn btn-primary">登录 / 注册</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主应用区域（登录后显示） -->
    <div id="app-container" class="container-fluid d-none">
        <!-- 导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">
                    <i class="fas fa-lock me-2"></i>密码管理器
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link active" href="#" id="nav-passwords">
                                <i class="fas fa-key me-1"></i>密码
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" id="nav-generator">
                                <i class="fas fa-random me-1"></i>密码生成器
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#" id="nav-settings">
                                <i class="fas fa-cog me-1"></i>设置
                            </a>
                        </li>
                    </ul>
                    <div class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="搜索..." id="search-input">
                        <button class="btn btn-light" id="btn-search">
                            <i class="fas fa-search"></i>
                        </button>
                        <button class="btn btn-danger ms-2" id="btn-logout">
                            <i class="fas fa-sign-out-alt"></i> 退出
                        </button>
                    </div>
                </div>
            </div>
        </nav>

        <!-- 密码列表区域 -->
        <div id="passwords-container" class="container">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h2>我的密码</h2>
                <button class="btn btn-success" id="btn-add-password" data-bs-toggle="modal"
                    data-bs-target="#password-modal">
                    <i class="fas fa-plus me-1"></i>添加密码
                </button>
            </div>

            <!-- 密码类别筛选 -->
            <div class="mb-4">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-outline-primary active" data-category="all">全部</button>
                    <button type="button" class="btn btn-outline-primary" data-category="website">网站</button>
                    <button type="button" class="btn btn-outline-primary" data-category="app">应用</button>
                    <button type="button" class="btn btn-outline-primary" data-category="other">其他</button>
                </div>
            </div>

            <!-- 密码列表表格 -->
            <div class="table-responsive">
                <table class="table table-hover" id="passwords-table">
                    <thead class="table-light">
                        <tr>
                            <th>名称</th>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>类别</th>
                            <th>最后修改</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 密码列表将通过JavaScript动态生成 -->
                        <tr class="no-passwords-message">
                            <td colspan="6" class="text-center">暂无密码记录，请点击"添加密码"按钮创建</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- 密码生成器区域 -->
        <div id="generator-container" class="container d-none">
            <h2 class="mb-4">密码生成器</h2>
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <label for="generated-password" class="form-label">生成的密码</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="generated-password" readonly>
                            <button class="btn btn-outline-secondary" id="btn-copy-password">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="password-length" class="form-label">密码长度: <span id="length-value">12</span></label>
                        <input type="range" class="form-range" id="password-length" min="8" max="32" value="12">
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="include-uppercase" checked>
                                <label class="form-check-label" for="include-uppercase">
                                    包含大写字母 (A-Z)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="include-lowercase" checked>
                                <label class="form-check-label" for="include-lowercase">
                                    包含小写字母 (a-z)
                                </label>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="include-numbers" checked>
                                <label class="form-check-label" for="include-numbers">
                                    包含数字 (0-9)
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" id="include-symbols" checked>
                                <label class="form-check-label" for="include-symbols">
                                    包含特殊符号 (!@#$%^&*)
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="d-grid mt-3">
                        <button class="btn btn-primary" id="btn-generate-password">生成密码</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设置区域 -->
        <div id="settings-container" class="container d-none">
            <h2 class="mb-4">设置</h2>
            <div class="card mb-4">
                <div class="card-header">主密码</div>
                <div class="card-body">
                    <form id="change-master-password-form">
                        <div class="mb-3">
                            <label for="current-master-password" class="form-label">当前主密码</label>
                            <input type="password" class="form-control" id="current-master-password" required>
                        </div>
                        <div class="mb-3">
                            <label for="new-master-password" class="form-label">新主密码</label>
                            <input type="password" class="form-control" id="new-master-password" required>
                            <div class="password-strength-container mt-2"></div>
                        </div>
                        <div class="mb-3">
                            <label for="confirm-master-password" class="form-label">确认新主密码</label>
                            <input type="password" class="form-control" id="confirm-master-password" required>
                        </div>
                        <button type="submit" class="btn btn-primary">更改主密码</button>
                    </form>
                </div>
            </div>
            <div class="card mb-4">
                <div class="card-header">安全设置</div>
                <div class="card-body">
                    <form id="security-settings-form">
                        <div class="mb-3">
                            <label for="auto-logout-time" class="form-label">自动登出时间（分钟）</label>
                            <select class="form-select" id="auto-logout-time">
                                <option value="5">5分钟</option>
                                <option value="10">10分钟</option>
                                <option value="15">15分钟</option>
                                <option value="30">30分钟</option>
                                <option value="60">1小时</option>
                                <option value="0">禁用</option>
                            </select>
                            <div class="form-text">设置无操作后自动登出的时间，选择"禁用"则不会自动登出。</div>
                        </div>
                        <div class="mb-3">
                            <label for="password-expiry-days" class="form-label">密码过期提醒（天）</label>
                            <select class="form-select" id="password-expiry-days">
                                <option value="30">30天</option>
                                <option value="60">60天</option>
                                <option value="90">90天</option>
                                <option value="180">180天</option>
                                <option value="365">1年</option>
                                <option value="0">禁用</option>
                            </select>
                            <div class="form-text">设置密码过期提醒的时间，选择"禁用"则不会提醒。</div>
                        </div>
                        <button type="submit" class="btn btn-primary">保存设置</button>
                    </form>
                </div>
            </div>
            <div class="card mb-4">
                <div class="card-header">数据管理</div>
                <div class="card-body">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-info" id="btn-export-data">
                            <i class="fas fa-download me-1"></i>导出数据
                        </button>
                        <button class="btn btn-warning" id="btn-import-data">
                            <i class="fas fa-upload me-1"></i>导入数据
                        </button>
                    </div>
                    <div class="d-grid">
                        <button class="btn btn-danger" id="btn-clear-data">
                            <i class="fas fa-trash-alt me-1"></i>清除所有数据
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑密码模态框 -->
    <div class="modal fade" id="password-modal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="password-modal-title">添加密码</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="password-form">
                        <input type="hidden" id="password-id">
                        <div class="mb-3">
                            <label for="password-name" class="form-label">名称</label>
                            <input type="text" class="form-control" id="password-name" required>
                        </div>
                        <div class="mb-3">
                            <label for="password-username" class="form-label">用户名</label>
                            <input type="text" class="form-control" id="password-username" required>
                        </div>
                        <div class="mb-3">
                            <label for="password-value" class="form-label">密码</label>
                            <div class="input-group">
                                <input type="password" class="form-control" id="password-value" required>
                                <button class="btn btn-outline-secondary" type="button" id="btn-toggle-password">
                                    <i class="fas fa-eye"></i>
                                </button>
                                <button class="btn btn-outline-secondary" type="button" id="btn-use-generator">
                                    <i class="fas fa-random"></i>
                                </button>
                            </div>
                            <div class="password-strength-container mt-2"></div>
                        </div>
                        <div class="mb-3">
                            <label for="password-url" class="form-label">网址</label>
                            <input type="url" class="form-control" id="password-url">
                        </div>
                        <div class="mb-3">
                            <label for="password-category" class="form-label">类别</label>
                            <select class="form-select" id="password-category" required>
                                <option value="website">网站</option>
                                <option value="app">应用</option>
                                <option value="other">其他</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="password-notes" class="form-label">备注</label>
                            <textarea class="form-control" id="password-notes" rows="3"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="btn-save-password">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS -->
    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <!-- CryptoJS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <!-- 自定义脚本 - 按照依赖顺序加载 -->
    <script src="js/crypto.js"></script>
    <script src="js/storage.js"></script>
    <script src="js/password-manager.js"></script>
    <script src="js/ui.js"></script>
    <script src="js/app.js"></script>

    <!-- 页脚 -->
    <footer class="footer mt-auto py-3">
        <div class="container text-center">
            <span class="text-muted">
                <a href="https://gitee.com/ruxi/local-password" target="_blank" class="text-decoration-none">
                    <i class="fab fa-gitee me-1"></i>项目地址
                </a>
            </span>
        </div>
    </footer>
</body>

</html>